/*
 clear .css file by nodejs 
*/
import React, { Component,  } from 'react'
import PropTypes from 'prop-types'
import Img from '../img'

export default class SwipeImage extends Component{
  static defaultProps = {
    auto : 3000,
    speed : 2500,
    onTouch : ()=>{},
    bannelThumbImgs :[],
    className : ''
  }
  static propTypes = {
    auto : PropTypes.oneOfType([PropTypes.number,PropTypes.bool]),
    speed : PropTypes.number,
    onTouch : PropTypes.func,
    bannelThumbImgs : PropTypes.array,
    className : PropTypes.string
  }
  componentDidMount(){
    let {auto,speed} = this.props
    var swiper = new Swiper('#home_swipe_pic', {
      pagination: '.swiper-pagination',
      paginationClickable: true,
      direction:'horizontal',
      autoplay:auto || 0,
      speed:speed,
      autoplayDisableOnInteraction: false
    });
  }
  render(){
    let {bannelThumbImgs, height, onTouch, className} = this.props
    if(!bannelThumbImgs.length) return null
    let images = bannelThumbImgs.map((item,i)=>{
      return (
        <div key={i} className="swiper-slide" onClick={()=>{
          onTouch(item)
        }}  style={{"backgroundImage":`url(${item.image_name||item.item_img1})`}}>
        </div>
      )
    })
    return(
      <div id='home_swipe_pic' className="text-swiper-container" style={{height:height}}>
        <div className="swiper-wrapper">
          {images}
        </div>
        <div className="swiper-pagination"></div>
    </div>
    )
  }
}
